import { Icon } from '@iconify/react'
import { Button, CenterPopup, Space } from 'antd-mobile'

import { Welcome } from '@/components'
import { useTheme } from '@/hooks'

import { useCount, useInit, useOther, usePopup } from './hooks'
import styles from './index.module.css'

export default function IndexPage() {
  const { welcomeRef, title, handleSay } = useInit()
  const { count, handleClick } = useCount()
  const { visible, handleClose, handleShow } = usePopup()
  const { handleJumpOther } = useOther()
  const { toggleDark } = useTheme()

  return (
    <div className={styles.page}>
      <Welcome ref={welcomeRef} msg={title} />
      <Button color="primary" onClick={handleSay}>
        调用组件方法
      </Button>
      <div className={styles.section}>
        <h3>Store</h3>
        <p>{count}</p>
        <Button color="primary" onClick={handleClick}>
          点击
        </Button>
      </div>
      <div className={styles.section}>
        <h3>弹出层</h3>
        <Button color="primary" onClick={handleShow}>
          点击
        </Button>
      </div>
      <div className={styles.section}>
        <h3>跳转页面</h3>
        <Button color="primary" onClick={handleJumpOther}>
          点击
        </Button>
      </div>
      <div className={styles.section}>
        <h3>主题切换</h3>
        <Button color="primary" onClick={toggleDark}>
          点击
        </Button>
      </div>
      <div className={styles.section}>
        <h3>自定义图标</h3>
        <Space>
          <Icon icon="custom:coffee" />
          <Icon icon="custom:chips" />
          <Icon icon="custom:ice-cream" />
          <Icon icon="custom:coke" />
          <Icon icon="custom:hamburg" />
        </Space>
      </div>
      <CenterPopup
        className={styles.popup}
        visible={visible}
        showCloseButton
        onClose={handleClose}
        onMaskClick={handleClose}
      >
        <div className={styles.popupContent}>哈哈</div>
      </CenterPopup>
    </div>
  )
}
